<template>
  <view :style="colorStyle">
    <view
      class="videoModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
      }"
    >
      <view class="info1">
        <swiper
          :indicator-dots="true"
          :circular="true"
          indicator-color="#ccc"
          :indicator-active-color="'var(--view-theme)'"
          :autoplay="false"
          :interval="5000"
          :duration="500"
          :style="{ height: `${info.height * 2}rpx` }"
          @change="videoChange"
        >
          <swiper-item v-for="(items, indexs) in info.value" :key="indexs">
            <video
              :id="'videos' + indexs"
              :enable-progress-gesture="false"
              :controls="info.control ? true : false"
              :muted="info.mute ? true : false"
              :autoplay="items.autoplay ? true : false"
              :loop="true"
              :src="items.link"
              :style="{
                borderRadius: `${info.radius * 2}rpx`,
                height: `${info.size == 2 ? info.height * 2 + 'rpx' : 'auto'}`,
              }"
            ></video>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
  },
  data() {
    return {
      videoContext: null,
    };
  },
  mounted() {
    console.log("----------videomounted----------");
    if (this.info.autoplay) {
      this.videoContext = uni.createVideoContext(`videos${0}`, this);
      this.videoContext.play();
    }
  },
  methods: {
    videoChange(e) {
      let current = e.detail.current;
      this.info.value.map((item, index) => {
        uni.createVideoContext(`videos${index}`, this).pause();
        if (current == index) {
          if (this.info.autoplay) {
            let videoContext = uni.createVideoContext(`videos${index}`, this);
            videoContext.play();
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.videoModule {
  .info1 {
    position: relative;

    img,
    video {
      width: 100%;
      height: 100%;
      background: #f5f5f5;
      // object-fit: cover;
    }
  }
}
</style>
